<!--
  用户管理页面
-->
<template>
  <div class="user-manager">
    <table-search @searchBack="serachTableData"  placeholder="请输入人员名称">
      <Button type="primary" @click="openModal('新增用户','userAdd')">新增用户</Button>
    </table-search>
    <div class="table-content">
      <Table :columns="columns" height="520" :data="tableData"></Table>
    </div>
    <div class="foot-center">
      <Page :total="page.total"
            :current="page.current"
            :page-size="page.size"
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
            show-sizer
            show-total/>
    </div>
    <Modal
      v-model="modal.show"
      :title="modal.title"
      scrollable
      @on-cancel="closeModal"
      class="modal-area"
      footer-hide
    >
      <div class="modal-h50" v-if="modal.type==='userAdd'">
        <Form ref="formInline" :label-width="70" v-if="modal.type==='userAdd'" :model="userInfo" :rules="userInfoRule">
          <FormItem label="用户名">
            <Input v-model="userInfo.userName" placeholder="用户名"></Input>
          </FormItem>
          <div v-show="isEdit">
            <FormItem label="密码">
              <Input type="password" v-model="userInfo.password" placeholder="用户名"></Input>
            </FormItem>
            <FormItem label="确认密码">
              <Input type="password" v-model="surePassword" placeholder="用户名"></Input>
            </FormItem>
          </div>
          <FormItem label="姓名">
            <Input v-model="userInfo.name" placeholder="姓名"></Input>
          </FormItem>
          <FormItem label="手机号">
            <Input v-model="userInfo.phoneNum"></Input>
          </FormItem>
          <FormItem label="邮箱">
            <Input v-model="userInfo.email"></Input>
          </FormItem>
          <FormItem label="生日">
            <DatePicker transfer v-model="userInfo.bornDate"  type="date" placeholder="请选择出生日期" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem label="性别">
            <RadioGroup v-model="userInfo.gender">
              <Radio label="1">男</Radio>
              <Radio label="0">女</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
      </div>
      <div class="modal-btn" v-if="modal.type==='userAdd'">
        <Button @click="closeModal">取消</Button>
        <Button type="primary" @click="saveUser">确定</Button>
      </div>

      <div v-if="modal.type==='choiceRole'">
        <check-role  :isSingle="false" @close-modal="closeModal" :checkedArr="userInfo.roleList" @sure-back="checkedRole"></check-role>
      </div>
    </Modal>
  </div>

</template>

<script>
import * as API from "@/api/sys-user.js";
import tableSearch from "_c/table-components/table-search"
import checkRole from "_c/sys-components/check-role"
import {formatDate} from "iview/src/components/date-picker/util";
import {saveUserRole} from "@/api/sys-role.js";

export default {
  name: "user-add",
  components: {tableSearch,checkRole},
  data() {
    return {
      modal: {
        show: false,
        title: "",
        type: ""
      },
      page:{
        total:0,
        current:1,
        size:10
      },
      columns: [
        {
          title: '姓名',
          align: "center",
          key: 'name'
        },
        {
          title: '用户名',
          align: "center",
          key: 'userName'
        },
        {
          title: '出生日期',
          align: "center",
          key: 'bornDate'
        },
        {
          title: '性别',
          align: "center",
          width: 80,
          render: (h, params) => {
            return h('span',params.row.gender==="1"?"男":"女" );
          }
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '手机号',
          key: 'phoneNum'
        },
        {
          title: '角色',
          align: "left",
          render: (h, params) => {
            let rolesName = params.row.roleList.map(m=>m.roleName)+""
            return h('div', rolesName);
          }
        },
        {
          title: '操作',
          align: "center",
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.isEdit = false
                    this.userInfo = Object.assign({},params.row)
                    this.openModal("编辑用户","userAdd")
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.userInfo = Object.assign({},params.row)
                    this.openModal("分配角色",'choiceRole')
                  }
                }
              }, '分配角色'),
            ]);
          }
        },
      ],
      tableData: [],
      surePassword: "",
      isEdit:true,
      searchName:"",
      userInfo: {
        userName: "",
        password: "",
        gender: "1",
        name:"",
        phoneNum: "",
        email: "",
        bornDate: "",
        id:"",
        roleList:[]
      },
      userInfoRule: {}
    };
  },
  methods: {
    saveUser() {
      let params = Object.assign({},this.userInfo)
      params.bornDate = formatDate(params.bornDate)
      API.saveUserInfo(params).then(res => {
        if (res.code==="0"){
          this.$Message.success("保存成功！");
          this.closeModal()
          this.serachTableData()
        }
      })
    },

    //确认选择角色后
    checkedRole(arr){
      let params = {
        userId:this.userInfo.id,
        roleIds:arr.map(m=>m.id)
      }
      saveUserRole(params).then(res=>{
        if (res.code==='0'){
          this.getTableData()
          this.$Message.success("配置角色成功！")
          this.closeModal()
        }
      }).catch(err=>{
        console.error(err)
      })
    },


    closeModal() {
      let cleanModal = {
        show: false,
        title: "",
        type: ""
      }
      let cleanInfo={
        userName: "",
          password: "",
          gender: "1",
          name:"",
          phoneNum: "",
          email: "",
          bornDate: "",
      }
      this.isEdit = true
      this.modal = Object.assign({}, cleanModal)
      this.userInfo = Object.assign({}, cleanInfo)
    },
    pageChange(page){
      this.page.current = page
      this.getTableData()
    },
    sizeChange(size){
      this.page.current = 1
      this.page.size = size
      this.getTableData()
    },

    //搜索
    serachTableData(value) {
      this.searchName = value
      this.page.current = 1
      this.getTableData()
    },
    //打开弹窗
    openModal(title,type) {
      let obj = {
        title: title,
        type: type,
        show: true
      }
      this.modal = Object.assign(this.modal, obj)
    },
    //获取表格数据
    getTableData(){
      API.getUserList({
        page:{
          current:this.page.current,
          size:this.page.size
        },
        name:this.searchName
      }).then( res =>{
        if (res.code==="0"){
          this.page.total = parseInt(res.data.total)
          this.tableData = res.data.records
        }
      })
    },
  },
  created() {
    this.getTableData()
  },
  mounted() {
    // this.init();
  }
};
</script>
<style lang="less" scoped>
.user-manager {
  width: 100%;
  .table-content {
    padding: 10px;
    text-align: center;
  }
}
</style>
